<template>
  <div id="Statistics">
    <div class="content">
      <div class="overflow-auto">
        <div class="Statistics_body">
          <div class="StatisticsData">
            <!-- 筛选 -->
            <div class="screen">
              <div class="screen_datepicker screen_datepicker_action">
                <el-date-picker size="small" style="width: 330px;" v-model="screenDate" type="daterange"
                  range-separator="至" @change="screenDateChange" start-placeholder="开始日期" end-placeholder="结束日期"
                  value-format="yyyy-MM-dd">


                </el-date-picker>
                <i class="el-icon-date"></i>
              </div>
              <div>
                <el-button type="primary" size="small" @click="toShiftHandover">交班</el-button>
                <el-button type="primary" size="small">导出明细</el-button>
              </div>
            </div>
          </div>
          <!-- END筛选 -->
          <!-- 表格 -->
          <div class="CollectionRecode">
            <div class="eltable" :style="{ height: maxHeight_eltable + 'px' }">
              <el-table :data="tableData" style="width: 100%;font-size: 14px;" :max-height="maxHeight_table"
                :header-cell-style="{ background: '#EBF1F6' }" border>
                <el-table-column prop="date" label="交班时间" align="center">
                  <template slot-scope="scope">
                    <span style="color: #0486FE;">{{ scope.row.create_time }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="start_date" label="开始时间" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.start_date }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="end_date" label="结束时间" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.end_date }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="give_man" label="交班人" align="center">
                </el-table-column>
                <el-table-column prop="receive_man" label="接班人" align="center">
                </el-table-column>
                <el-table-column prop="status" label="交班状态" align="center">
                  <!-- 0待接班，1成功，2失败 -->
                  <template slot-scope="scope">
                    <span :style="{ color: scope.row.status == 1 ? '#1989FA' : scope.row.status == 2 ? '#FB2222' : '' }">
                      {{ scope.row.status == 0 ? '待接班' : scope.row.status == 1 ? '成功' : scope.row.status == 2 ? '失败' :
                        '待确认' }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" @click="examine(scope.$index, scope.row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
              <div class="pagination">
                <pagination :data="pageNation_data" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </pagination>
              </div>

            </div>
          </div>
          <!--  -->
          <el-dialog title="请填写拒绝原因" :visible.sync="fill_rejectReason_Dialog" width="450px">
            <div style="padding:0 29px">
              <el-input type="textarea" style="height:200px" v-model="rejectReason" autocomplete="off"
                placeholder="请填写拒绝原因"></el-input>
              <div class="bt" style="margin:30px auto;width:130px">
                <el-button type="danger" size="small" @click="toSuccession(2)">确认</el-button>
                <el-button type="primary" size="small" @click="fill_rejectReason_Dialog = false">取消 </el-button>
              </div>
            </div>
          </el-dialog>
          <!-- 点击查看弹出 对话框 -->
          <div class="examine">
            <el-dialog :visible.sync="ExamineDialogTableVisible" width="760px">
              <template slot="title">
                <div class="Dialog_Title">
                  <!-- 0待接班，1成功，2失败  交接详情 待接班 交接成功 交接失败-->
                  <span
                    :style="{ 'color': ExamineStatus_Dialog == 1 ? '#00B086' : ExamineStatus_Dialog == 2 ? '#FB2222' : '' }">
                    {{ ExamineStatus_Dialog == '交班' ? '待交班' : ExamineStatus_Dialog == 0 ? '待接班'
                      : ExamineStatus_Dialog == 1 ? '交接成功' : ExamineStatus_Dialog == 2 ? '交接失败' : '' }}
                  </span>
                  <div class="hotelName">{{ hotel_name }}</div>
                </div>
              </template>

              <!-- 交接详情 -->
              <div v-if="ExamineStatus_Dialog == '交班'" class="ShiftWorkDetailBox">
                <div class="ShiftWorkDetail">
                  <div class="left">
                    <!-- 选择时间 -->
                    <div class="screen">
                      <div class="screen_datepicker screen_datepicker_action">
                        <el-date-picker disabled size="small" :clearable="false" style="width: 330px;"
                          v-model="handoverTable.times" type="datetimerange" range-separator="至"
                          @change="screenDateChange" start-placeholder="开始日期" end-placeholder="结束日期"
                          value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                        <i class="el-icon-date"></i>
                      </div>
                    </div>
                    <div class="total_amount">
                      <div>
                        <span>￥{{ handoverTable.total }}</span>
                        <span>合计金额</span>
                      </div>
                      <div>
                        <span>￥{{ handoverTable.total_income }}</span>
                        <span>收入金额</span>
                      </div>
                      <div>
                        <span>￥{{ handoverTable.total_disburse }}</span>
                        <span>退款/支出金额</span>
                      </div>
                    </div>
                    <div class="detail_amount">
                      <div class="order">
                        <el-table :data="handoverTable.order_data" :header-cell-style="{ background: '#FAFBFA' }"
                          style="width: 100%">
                          <el-table-column prop="order_type" label="订单类型">
                          </el-table-column>
                          <el-table-column prop="income" label="收入金额">
                          </el-table-column>
                          <el-table-column prop="disburse" label="退款/支出金额">
                          </el-table-column>
                          <el-table-column prop="total" label="小计">
                          </el-table-column>
                        </el-table>
                      </div>
                      <div class="pay" style="margin-top: 20px;">
                        <el-table :data="handoverTable.pay_type_data" :header-cell-style="{ background: '#FAFBFA' }"
                          style="width: 100%">
                          <el-table-column prop="order" label="支付方式">
                          </el-table-column>
                          <el-table-column prop="amount" label="收入金额">
                          </el-table-column>
                          <el-table-column prop="refund" label="退款/支出金额">
                          </el-table-column>
                          <el-table-column prop="total" label="小计">
                          </el-table-column>
                        </el-table>
                      </div>
                    </div>
                  </div>
                  <div class="right">
                    <div class="successor">
                      <span>交班人:</span>
                      <span>{{ handoverDetail.give_man }}</span>
                    </div>
                    <div class="input" style="height:calc(100% - 40px)">
                      <el-input type="textarea" style="height:calc(100%)" placeholder="请输入备注"
                        v-model="handoverDetail.remarks">
                      </el-input>
                    </div>
                  </div>
                </div>
                <div class="bottom">
                  <div class="left">
                    <span>交接后数据不可修改，请仔细核对！</span>
                  </div>
                  <div class="right">
                    <el-button size="small" @click="ExamineDialogTableVisible = false">取消</el-button>
                    <el-button type="primary" size="small" @click="confirm()"> 确认交接</el-button>
                  </div>
                </div>
              </div>
              <!-- END交接详情 -->

              <!-- 待接班 交接成功 交接失败-->
              <div v-if="ExamineStatus_Dialog != '交班'" class="ShiftWorkViewBox">
                <div class="screen">
                  <div class="screen_datepicker screen_datepicker_action">
                    <el-date-picker size="small" disabled :clearable="false" style="width: 330px;"
                      v-model="handoverDetail.screenTime" type="datetimerange" range-separator="至"
                      @change="screenDateChange" start-placeholder="开始日期" end-placeholder="结束日期"
                      value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                    <i class="el-icon-date"></i>
                  </div>
                </div>
                <div class="FinancialStatistics">
                  <span>财务合计</span>
                </div>
                <el-table :data="handoverDetail.detail.order_data" :header-cell-style="{ background: '#FAFBFA' }"
                  style="width: 100%">
                  <el-table-column prop="order_type" label="订单类型">
                  </el-table-column>
                  <el-table-column prop="income" label="收入金额">
                  </el-table-column>
                  <el-table-column prop="disburse" label="退款/支出金额">
                  </el-table-column>
                  <el-table-column prop="total" label="小计">
                  </el-table-column>
                </el-table>
                <el-table :data="handoverDetail.detail.pay_type_data" :header-cell-style="{ background: '#FAFBFA' }"
                  style="width: 100%">
                  <el-table-column prop="order" label="支付方式">
                  </el-table-column>
                  <el-table-column prop="amount" label="收入金额">
                  </el-table-column>
                  <el-table-column prop="refund" label="退款/支出金额">
                  </el-table-column>
                  <el-table-column prop="total" label="小计">
                  </el-table-column>
                </el-table>
                <div class="bottom" style="width:100%">
                  <div class="bottom_top">
                    <div class="shift">
                      <span>交班人：</span>
                      <span>{{ handoverDetail.give_man }}</span>
                    </div>
                    <div class="successor">
                      <span>接班人：</span>
                      <span>
                        {{ info.name }}
                        <span v-if="ExamineStatus_Dialog == 1 || ExamineStatus_Dialog == 2"
                          :style="{ 'color': ExamineStatus_Dialog == 1 ? '#00B086' : '#FF4646', }">
                          ({{ ExamineStatus_Dialog == 1 ? '已确认接班' : '接班失败' }})
                        </span>
                      </span>
                    </div>
                  </div>
                  <div class="remarks">
                    <span>备注: </span>
                    <span>{{ handoverDetail.remarks }}</span>
                  </div>
                  <div class="bt" v-if="ExamineStatus_Dialog == 0">
                    <!-- 1 确认接班 2拒接接班 -->
                    <!-- toSuccession(2) -->
                    <el-button type="danger" size="small" @click="fill_rejectReason_Dialog = true">拒绝接班</el-button>
                    <el-button type="primary" size="small" @click="toSuccession(1)">确认接班</el-button>
                  </div>
                </div>

              </div>
              <!-- END待接班 交接成功 交接失败-->
            </el-dialog>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

import Pagination from '../../../../components/PaginationPage/Pagination.vue'
import { getdaysAgo } from '../../../../api/countDay'
export default {
  name: 'Statistics',
  components: {
    Pagination,
  },
  computed: {
    ...mapState('d2admin/user', [
      'info'
    ])
  },
  data() {
    return {
      hotel_name: sessionStorage.getItem('hotel_name'),
      loading: true,//加载中
      screenDate: [],//筛选时间
      tableHeaderData: [],//营业明细表格
      tableData: [],//营业明细表格
      ExamineDialogTableVisible: false,//查看对话框
      ExamineStatus_Dialog: 1,// 0待接班，1成功，2失败
      action_id: null,//当前点击查看 操作行

      fill_rejectReason_Dialog: false,//填写拒绝原因对话框
      rejectReason: '',//拒绝原因
      handoverTable: {
        code: '',
        start_date: '',
        end_date: '',
        total: '',
        total_income: '',
        total_disburse: '',
        order_data: [],
        pay_type_data: [],
        times: [],
      },//交班报表数据
      handoverDetail: {
        hotel_id: '',
        id: 0,
        code: "",
        create_time: "",
        update_time: "",
        detail: [],
        give_man: "",
        receive_man: "",
        reject_reason: null,
        remarks: null,
        start_date: "",
        end_date: "",
        status: 0,
        screenTime: []
      },//交接详情
      maxHeight_eltable: window.innerHeight - 180,//
      maxHeight_table: window.innerHeight - 250,//表格最大高度
      pageNation_data: {
        total: 0,
        currentPage: 1,
        currentSize: 10,
        small: false
      },// 传递分页组件的数据
    }
  },
  created() {
    this.getInit()
    let id = this.$route.params.id

    if (id && id != 0) {
      console.log(id, '传递的id');
      this.getHandoverDetail(id, true)
      this.ExamineDialogTableVisible = true
      this.ExamineStatus_Dialog = this.handoverDetail.status
      this.action_id = id
    }
  },
  mounted() {
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    // 移除窗口大小变化的监听
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    ...mapActions('d2admin/account', [
      'logout'
    ]),
    openFullScreen() {//即将退出登录
      const loading = this.$loading({
        lock: true,
        text: '即将退出登录',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
      }, 1500);
    },

    // 去交班
    toShiftHandover() {
      this.ExamineStatus_Dialog = '交班'
      this.ExamineDialogTableVisible = true
      this.handoverDetail.give_man = this.info.name
      this.getHandoverTable()
    },
    // 交接班数据报表
    getHandoverTable() {
      let handoverData = {
        hotel_id: sessionStorage.getItem('hotel_id'),
      }
      console.log(handoverData, '交班数据报表');
      this.my_request('supplier/hotel-pms-handover', handoverData, "GET").then(res => {
        let { code, data } = res.data
        console.log(res, '交班数据报表');
        if (code === 200) {
          this.handoverTable = data
          this.handoverTable.times = [this.handoverTable.start_date, this.handoverTable.end_date]
        }
      })
    },

    // 交接详情  确认交接
    confirm() {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        code: this.handoverTable.code,
        start_date: this.handoverTable.start_date,
        end_date: this.handoverTable.end_date,
      }
      console.log(data, '确认交接data');
      this.my_request('supplier/hotel-pms-handover', data, "POST").then(res => {
        let { code, message } = res.data
        console.log(res, '确认交接res');
        if (code === 200) {
          this.$message({
            message: message,
            type: 'success',
            duration: 500
          })

          setTimeout(() => {
            this.openFullScreen()
          }, 500);
          setTimeout(() => {
            this.logout({// 登出
              confirm: false
            })
          }, 2000);
        }
        else {
          this.$message.error(message)
        }
      })
    },

    // 查看
    examine(index, row) {
      console.log(index, row);
      this.getHandoverDetail(row.id)
      this.ExamineDialogTableVisible = true
      this.ExamineStatus_Dialog = row.status
      this.action_id = row.id
    },
    // 获取交接班详情 获取待接班详情
    getHandoverDetail(id) {
      let datas = {
        id,
      }
      this.my_request('supplier/hotel-pms-handover-detail', datas, "GET").then(res => {
        let { code, data } = res.data
        console.log(res, '获取待接班详情');
        if (code === 200) {
          this.handoverDetail = data
          this.handoverDetail.screenTime = [this.handoverDetail.create_time, this.handoverDetail.update_time]
        }
      })
    },
    // 确认接班
    toSuccession(status) {
      if (status == 2) {
        this.fill_rejectReason_Dialog = false
      }
      let data = {
        id: this.action_id,
        status,//	1 确认接班 2拒接接班
        reject_reason: this.rejectReason,
      }
      console.log(this.action_id, 'this.action_id.', status);
      console.log('this.data.', data);
      this.my_request('supplier/hotel-pms-handover-confirm', data, 'PUT').then(res => {
        console.log('确认接班res', res);
        let { code, message } = res.data
        if (200 === code) {
          this.$message({
            message: message,
            type: 'success',
            duration: 2000
          })
          this.getInit()
          this.ExamineDialogTableVisible = false
          this.rejectReason = ''
        } else {
          this.$message.error(message)
        }
      })
    },

    // f分页组件
    handleSizeChange(val) {
      // 处理每页数量改变的逻辑
      console.log(`每页 ${val} 条`);
      this.pageNation_data.currentSize = val
    },
    handleCurrentChange(val) {
      // 处理当前页码改变的逻辑
      console.log(`当前页: ${val}`);
      this.pageNation_data.currentPage = val
    },
    // 监听窗口大小变化
    handleResize() {
      // 在这里处理窗口大小变化的逻辑
      let screenHeight = window.innerHeight;
      this.maxHeight_eltable = screenHeight - 180
      this.maxHeight_table = screenHeight - 250
    },


    // 筛选日期时间发生变化
    screenDateChange() {
      console.log(this.screenDate, 'screenDate');
    },

    // 获取交接班列表
    getInit() {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        start_date: this.screenDate[0],
        end_date: this.screenDate[1],
        page: this.pageNation_data.currentPage,

      }
      console.log('获取交接班列表data ', data)
      this.my_request('supplier/hotel-pms-handover-list', data, "GET").then(res => {
        console.log('获取交接班列表 ', res)
        let { code, data } = res.data
        if (code === 200) {
          this.tableData = data.list
          this.pageNation_data.total = data.total
        }
      })
    },
  }
}
</script>


<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 10px 20px;
}

.examine {

  .Dialog_Title {
    display: flex;
    align-items: center;
    height: 25px;

    .hotelName {
      background-color: #1989FA;
      margin-left: 10px;
      font-size: 13px;
      color: white;
      padding: 0 15px;
      height: 22px;
      line-height: 22px;
      border-radius: 3px;
    }
  }

  .ShiftWorkDetailBox {

    .ShiftWorkDetail {
      display: flex;
      justify-content: space-between;

      .left {
        width: calc(100% - 240px - 15px);

        .total_amount {
          display: flex;
          justify-content: space-between;
          padding: 20px 0;

          div {
            span {
              display: block;
            }

            span:nth-child(1) {
              font-size: 20px;
              color: black;
            }

            span:nth-child(2) {
              margin-top: 8px;
              font-size: 13px;
              color: #666666;
            }
          }
        }

        .detail_amount {
          width: 100%;

          .order {
            padding: 0px !important;
          }

        }
      }

      .right {
        width: 240px;

        .successor {
          margin: 10px 0;
          display: flex;
          align-items: center;
          gap: 10px;
        }
      }


    }

    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 0;

      .left {
        background-color: #FFF1F0;
        color: #FF4646;
        border-radius: 20px;
        padding: 5px 15px;
        font-size: 12px;
      }
    }
  }

  .ShiftWorkViewBox {
    .FinancialStatistics {
      margin: 5px 0 20px 0;
      height: 35px;
      text-indent: 1em;
      background-color: #F9F9F9;
      display: flex;
      align-items: center;
    }
  }

  .bottom {
    padding: 15px 0;

    .bottom_top {
      display: flex;
      padding-bottom: 10px;

      div {
        width: 50%;
      }
    }

    .bt {
      width: 170px;
      margin: auto;
      margin-top: 50px;
    }
  }
}

::v-deep .el-textarea__inner {
  height: 100%;
  background-color: #FAFAFA;
}


.eltable {
  border: 1px solid #E4E7ED;
}

.screen {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.CollectionRecode {
  margin-top: 20px;
  position: relative;

  .pagination {
    width: 100%;
    height: 30px;
    padding: 20px 0;
    position: absolute;
    bottom: 0;
    right: 10px;
  }

  .eltable {
    background-color: white;
  }
}

.content {
  .overflow-auto {
    width: calc(100vw - 190px);
    height: calc(100vh - 100px);
    overflow: auto;
    padding: 20px;

    .Statistics_body {
      width: 100%;
    }
  }
}
</style>
<!-- 日期选择器样式 -->
<style lang="scss" scoped>
::v-deep .el-input__icon.el-range__icon.el-icon-time {
  display: none;
}

::v-deep .el-input__icon.el-range__icon.el-icon-date {
  display: none;
}

.screen_datepicker {
  position: relative;
  width: 330px;
  height: 32px;
}

.screen_datepicker i {
  position: absolute;
  right: 5px;
  z-index: 7;
  color: black;
  line-height: 32px;
}
</style>